<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">筛选查询</h3>
      </div>
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <div class="col-sm-6">
              <div class="row">
                <label class="col-sm-2 control-label">模板名称：</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control" placeholder="请输入模板名称">
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
            <button type="button" class="btn bg-yellow pull-right m-r-10" data-toggle="modal" data-target="#modal-default">添加模板</button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>
                  <label>
                    <input type="checkbox" class="flat-red" checked>
                  </label>
                </th>
                <th>模板名称</th>
                <th>应用物流数</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr ref="trItem">
                <td>
                  <label>
                    <input type="checkbox" class="flat-red">
                  </label>
                </td>
                <td>欧美国家</td>
                <td>2</td>
                <td>2018-4-19 8:35</td>
                <td>
                  <a href="javascript:;" class="text-green m-lr-10">编辑</a>
                  <a href="javascript:;" class="text-green m-lr-10">应用到物流</a>
                  <a href="javascript:;" class="text-green m-lr-10">删除</a>
                </td>
              </tr>
              <tr ref="trItem">
                <td>
                  <label>
                    <input type="checkbox" class="flat-red">
                  </label>
                </td>
                <td>欧美国家</td>
                <td>2</td>
                <td>2018-4-19 8:35</td>
                <td>
                  <a href="javascript:;" class="text-green m-lr-10">编辑</a>
                  <a href="javascript:;" class="text-green m-lr-10">应用到物流</a>
                  <a href="javascript:;" class="text-green m-lr-10">删除</a>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>


    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加模板</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="box-body">
                <div class="form-group">
                  <div class="col-sm-12">
                    <label for="" class="control-label"><sup class="text-red">*</sup>模板名称：</label>
                    <input class="form-control" placeholder="请输入模板名称">
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="box-body text-center">
            <button type="button" class="btn btn-info">保存并编辑</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
</template>

<script>
    export default {
        name: "TheFreightTemplate"
    }
</script>

<style scoped>

</style>
